<template>
  <!-- 编码人: lzq -->
  <div>
    <el-card class="box-card">
      <!-- 1第一行 -->
      <div class="one">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray">资源配置</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>合作伙伴</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 按钮 -->
        <div class="but">
          <div class="buttens">
            <el-button
              type="primary"
              size="medium"
              @click="showAddlog('addform')"
              class="cancel"
              >新增</el-button
            >
            <el-button size="medium" @click="upShow" class="saveBtn"
              >预览</el-button
            >
          </div>
          <div class="search">
            <el-input
              size="small"
              v-model="page.name"
              placeholder="输入伙伴名称"
              suffix-icon="el-icon-search"
              @input="search()"
            ></el-input>
          </div>
        </div>
      </div>
      <!-- 内容页面 -->
      <el-table
        border
        :data="tableData"
        ref="singleTable"
        highlight-current-row
        @current-change="handleIndex"
      >
        <el-table-column width="180px" label="序号" type="index">
        </el-table-column>
        <el-table-column label="伙伴名称">
          <template slot-scope="scope">
            <p class="name_p">{{ scope.row.partner }}</p>
          </template>
        </el-table-column>

        <el-table-column label="logo">
          <template slot-scope="scope" class="logo_img">
            <img :src="scope.row.partnerLogo" alt="" />
          </template>
        </el-table-column>

        <el-table-column label="排序">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template class="delete" slot-scope="scope">
            <el-button
              class="btn_box btn_right"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              class="btn_box btn_right"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, prev, pager, next, sizes, jumper"
        :total="totalElements"
      >
      </el-pagination>
    </el-card>
    <!-- 新增弹窗开始 -->
    <el-dialog title="新增" :visible.sync="addlog" width="525px">
      <div>
        <el-form
          :model="addform"
          ref="addform"
          :rules="rules"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="伙伴名称" prop="partner">
            <el-input
              placeholder="请输入伙伴名称"
              minlength="2"
              maxlength="20"
              v-model="addform.partner"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="LOGO" prop="partnerLogo" class="logoup">
            <!-- 新增弹窗图片上传功能 -->
            <!-- <div class="star">
              <img src="./partner_img/xing.png" alt="">
            </div> -->
            <div class="close_small" v-if="newUrl" @click.stop="close">
              <img src="./partner_img/close_small.png" alt="" />
            </div>

            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :http-request="addRequest"
              :on-change="headleChange"
              :disabled="nweUpload"
              accept="image/*"
            >
              <img v-if="newUrl" :src="newUrl" class="avatar" />
              <div class="upImg" v-show="isShowIcon">
                <div>
                  <img src="./partner_img/upimg.png" alt="" />
                </div>
              </div>
            </el-upload>
            <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            <!-- 新增弹窗图片上传功能结束 -->
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input
              placeholder="请输入排序"
              v-model.number="addform.sort"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addform')" class="saveBtn"
          >取 消</el-button
        >
        <el-button @click="addbao('addform')" class="cancel">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹窗结束 -->
    <!-- 编辑弹窗开始 -->
    <el-dialog title="编辑" :visible.sync="edlog" width="525px">
      <div>
        <el-form
          :model="editfrom"
          ref="editfrom"
          :rules="editrules"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="伙伴名称" prop="editPartner">
            <el-input
              placeholder="请输入伙伴名称"
              minlength="2"
              maxlength="20"
              v-model="editfrom.editPartner"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="LOGO" prop="editpartnerLogo" class="editlogo">
            <div class="close_small" v-if="imageUrl" @click.stop="closeEdit">
              <img src="./partner_img/close_small.png" alt="" />
            </div>
            <!-- 编辑弹窗图片上传功能 -->
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :http-request="editRequest"
              :on-change="editHeadleChange"
              :disabled="oldUpload"
              accept="image/*"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <div class="upImg" v-show="edithShowIcon">
                <div>
                  <img src="./partner_img/upimg.png" alt="" />
                </div>
              </div>
            </el-upload>
            <span class="hint">支持JPG、PNG格式，不超过3MB</span>
            <!-- 编辑弹窗图片上传功能结束 -->
          </el-form-item>
          <el-form-item label="排序" prop="editsort">
            <el-input
              placeholder="请输入排序"
              v-model.number="editfrom.editsort"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="edlog = false" class="saveBtn">取 消</el-button>
        <el-button @click="save('editfrom')" class="cancel">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹窗结束 -->
    <!-- 预览弹窗开始 -->
    <div class="seeUp" v-show="isShowRed">
      <div class="seeUp_centent">
        <p>合作伙伴</p>
        <div class="show_redx" @click="showRed"></div>
        <div class="img_box">
          <!-- 合作客户预览图片 -->
          <div v-for="(item, index) in images_long" :key="index">
            <img :src="item.partnerLogo" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 预览弹窗结束 -->
  </div>
</template>

<script>
import {
  // 获取合作伙伴接口(开放)
  getPartner,
  // 保存合作伙伴接口
  savePartner,
  // 删除合作伙伴接口
  deletePartner,
  // 根据id查询合作伙伴接口
  getsearch,
  // 分页查询合作伙伴接口
  searchPage,
  // 上传图片的接口
  uploads,
  //查询合作伙伴接口(未开放)
  getPartnerSearch,
} from "@/api/connector/connector.js";
export default {
  name: "partner",
  components: {},
  props: {},
  data() {
    return {
      // 点×号显示隐藏
      isClose: false,
      editClose: false,
      //新增的弹窗
      addlog: false,
      // 新增弹窗的页面内容
      addform: {
        id: null,
        partner: "",
        partnerLogo: "",
        sort: null,
        sortEnd: null,
      },
      sorts: [],
      // 原总数组
      allArr: [],
      //需要编辑的数组
      indlist: [],
      //新增需要的数组
      addlists: [],
      //新增合作伙伴名字
      addpartner: [],
      // 新增上传是否禁用
      nweUpload: false,
      // 新增弹窗url上传图片临时路径
      newUrl: "",
      // 新增上传图片的http路径
      itemImg: "",
      // 新增上传图片成功后隐藏上传logo
      isShowIcon: true,
      // 点击编辑时获取的id
      redactId: "",
      // 编辑的弹窗
      edlog: false,
      // 编辑内容弹窗页面内容
      editfrom: {
        editPartner: "",
        editPartnerLogo: "",
        editsort: "",
      },
      oldUpload: false,
      // 编辑弹窗上传图片url临时路径
      imageUrl: "",
      // 编辑上传图片logo显示隐藏
      edithShowIcon: false,
      // 预览框显示隐藏
      isShowRed: false,
      // 预览图片的数组对象
      images_long: [],
      // 内容页面
      tableData: [],
      //1.页码
      page: {
        pageSize: 10, //条数
        pageNum: 1, //页码
        //查询条件
        name: null,
      },
      ruleForm: {
        name: "",
      },
      // 点击新增的表单验证
      rules: {
        partner: [
          { required: true, message: "请输入伙伴名称", trigger: "change" },
          {
            pattern: /^[a-zA-Z\u4E00-\u9FFF]+$/,
            message: "只能输入文字或字母",
            trigger: "change",
          },
          {
            min: 2,
            max: 20,
            message: "请输入2到20个并且不重复文字或字母",
            trigger: "change",
          },
        ],
        sort: [
          { required: true, message: "排序为必填项", trigger: "blur" },
          {
            type: "number",
            message: "数值为数字型",
          },
          {
            validator: (rule, value, callback) => {
              if (value <= 0) {
                callback(new Error("排序为正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // 点击编辑表单验证
      editrules: {
        editPartner: [
          { required: true, message: "请输入伙伴名称", trigger: "change" },
          {
            pattern: /^[a-zA-Z\u4E00-\u9FFF]+$/,
            message: "只能输入文字或字母",
            trigger: "change",
          },
          {
            min: 2,
            max: 20,
            message: "请输入2到20个并且不重复文字或字母",
            trigger: "change",
          },
        ],
        editsort: [
          { required: true, message: "排序为必填项", trigger: "blur" },
          {
            type: "number",
            message: "请输入数字",
          },
          {
            validator: (rule, value, callback) => {
              if (value <= 0) {
                callback(new Error("排序为正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // 搜索按钮前的input框
      userName: "",
      // img: "", //图片地址
      // 搜索时传入的index
      currentRow: null,
      // 搜索按钮传入的当前页和每页的数量
      totalElements: 0,
      Uid: "",
      OpenId: "",
      Skey: "",
    };
  },
  created() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    // 上移动
    // sortUp (index, row) {
    //   console.log(row);
    //   row.sort--
    // },
    // 下移动
    // sortDown (index, row) {
    //   console.log(row);
    //   row.sort++
    // },
    // 分页查询封装
    async getList() {
      try {
        const { data } = await searchPage(this.page);
        this.tableData = data.data.data;
        this.totalElements = data.data.totalElements * 1;
        // console.log(this.linktable);
      } catch (error) {
        this.$message.error("您提交的太频繁了...");
      }
    },
    // 新增弹窗 将上传图片的原路径赋值给临时路径
    headleChange(file, fileList) {
      this.newUrl = URL.createObjectURL(file.raw);
      // 关闭按钮显示
      this.isShowIcon = false;
      this.nweUpload = true;
    },
    // 图片点击x号清空本地地址
    close() {
      this.newUrl = "";
      this.isShowIcon = true;
      this.nweUpload = false;
    },
    // 新增弹窗上传图片调用接口
    addRequest(item) {
      //验证图片格式大小信息
      const isJPG =
        item.file.type == "image/jpeg" || item.file.type == "image/png";
      const isLt3M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        setTimeout(() => {
          this.$message({
            message: "上传图片只能是 JPG 或 PNG 格式!",
            type: "error",
            duration: 3000,
          });
        }, 1500);
      }
      if (!isLt3M) {
        this.newUrl = "";
        this.isShowIcon = true;
        this.nweUpload = false;
        this.$message({
          message: "上传图片大小不能超过 3MB!",
          type: "error",
          duration: 1000,
        });
      }
      // return isJPG && isLt3M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt3M == true) {
        this.nweUpload = true;
        let formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "合作伙伴");
        formData.append("tagNames", ["合作伙伴"]);
        // console.log(item.file);
        uploads(formData).then((res) => {
          // console.log(res);
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              // console.log(item.url);
              // 把网络地址图片放入变量itemImg里
              this.itemImg = item.url;
              this.addform.partnerLogo = this.itemImg;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },
    // 点击新增按钮触发事件
    showAddlog(formName) {
      this.sorts = [];
      this.indlist = [];
      this.addpartner = [];
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
      getPartner().then((res) => {
        if (res.data.code === "10000") {
          this.addlists = res.data.data;
          this.allArr = JSON.parse(JSON.stringify(res.data.data));
          this.allArr.map((item, index) => {
            this.sorts.push(item.sort);
            this.addpartner.push(item.partner);
          });
          //>>>>>>>>>>>>>>>>>
          // console.log(this.sorts);
          // console.log(this.addpartner);
          //>>>>>>>>>>>>>>>>>>>>>
          if (res.data.data.length >= 50) {
            this.$message.error("合作伙伴上线50个，请先删除一个原合作伙伴");
          } else {
            (this.addform = {
              id: null,
              partner: "",
              partnerLogo: "",
              sort: null,
              sortEnd: null,
            }),
              (this.addlog = true);
            this.nweUpload = false;
            this.newUrl = "";
            this.isShowIcon = true;
          }
        }
      });
    },
    //找到索引
    findindexs(arr, value, key) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i][key] == value) {
          return i;
        }
      }
    },
    //确认保存新增
    addbao(formName) {
      if (this.addpartner.indexOf(this.addform.partner) !== -1) {
        this.$message({
          message: "该合作伙伴名称已存在！",
          type: "warning",
        });
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.sorts.indexOf(this.addform.sort) < 0) {
            } else {
              let ind = this.findindexs(this.allArr, this.addform.sort, "sort");
              if (ind == 0) {
                this.allArr.unshift({ sort: this.allArr[0].sort - 1 });
                ind = 1;
                for (
                  let index = ind;
                  index < this.allArr.length &&
                  this.allArr[index].sort - this.allArr[index - 1].sort < 2;
                  index++
                ) {
                  this.indlist.push(this.allArr[index]);
                }
                this.addform.sortEnd = this.indlist[
                  this.indlist.length - 1
                ].sort;
              } else if (ind == this.allArr.length - 1) {
                this.addform.sortEnd = this.allArr[this.allArr.length - 1].sort;
              } else {
                if (this.allArr[ind + 1].sort - this.allArr[ind].sort > 1) {
                  this.addform.sortEnd = this.allArr[ind].sort;
                } else {
                  this.allArr.push({
                    sort: this.addlists[this.addlists.length - 1].sort + 3,
                  });
                  for (
                    let index = ind;
                    index < this.allArr.length - 1 &&
                    this.allArr[index + 1].sort - this.allArr[index].sort < 2;
                    index++
                  ) {
                    this.indlist.push(this.allArr[index]);
                  }
                  this.addform.sortEnd =
                    this.indlist[this.indlist.length - 1].sort + 1;
                }
              }
            }
            savePartner(this.addform)
              .then((res) => {
                if (res.data.code === "10000") {
                  this.addlog = false;
                  this.getList();
                  this.$message({
                    message: "新增成功",
                    type: "success",
                  });
                }
              })
              .catch((error) => {
                this.$message.error("保存失败");
              });
          } else {
            this.$message({
              message: "请仔细阅读填写要求！",
              type: "error",
            });
            return false;
          }
        });
      }
    },
    // 新增弹窗取消按钮触发事件
    resetForm(formName) {
      if (
        this.addform.partner !== "" ||
        this.addform.partnerLogo !== "" ||
        this.addform.sort !== ""
      ) {
        this.nweUpload = false;
        this.addlog = false;
        this.newUrl = "";
        this.isShowIcon = true;
        this.$message({
          message: "取消成功,内容清空",
          type: "success",
        });
      }
      this.$refs[formName].resetFields();
      this.addlog = false;
    },
    // 编辑弹窗 将上传图片的原路径赋值给临时路径
    editHeadleChange(file, fileList) {
      this.edithShowIcon = false;
      this.oldUpload = false;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片点击x号清空本地地址
    closeEdit() {
      this.oldUpload = false;
      this.imageUrl = "";
      this.edithShowIcon = true;
    },
    // 编辑弹窗上传图片调用接口
    editRequest(eititem) {
      //验证图片格式大小信息
      const isJPG =
        eititem.file.type == "image/jpeg" || eititem.file.type == "image/png";
      const isLt3M = eititem.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        setTimeout(() => {
          this.$message({
            message: "上传图片只能是 JPG 或 PNG 格式!",
            type: "error",
            duration: 3000,
          });
        }, 1500);
      }
      if (!isLt3M) {
        // 图片上传大于3M 把网络地址赋值给本地
        this.oldUpload = true;
        this.imageUrl = this.editfrom.editPartnerLogo;
        this.edithShowIcon = true;
        this.$message({
          message: "上传图片大小不能超过 3MB!",
          type: "error",
          duration: 1000,
        });
      }
      if (isJPG && isLt3M == true) {
        this.oldUpload = true;
        let formData = new FormData();
        formData.append("files", eititem.file);
        formData.append("mediaType", 1);
        formData.append("categoryName", "合作伙伴");
        formData.append("tagNames", ["合作伙伴"]);
        uploads(formData).then((res) => {
          // console.log(res);
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data;
            arrayImg.map((item, index) => {
              // console.log(item.url);
              // 把网络地址图片放入变量itemImg里
              this.itemImg = item.url;
              this.editfrom.editPartnerLogo = this.itemImg;
            });
          } else {
            this.$message.error("网络请求失败");
          }
        });
      }
    },
    // 点击编辑触发事件
    async handleEdit(index, row) {
      this.addpartner = [];
      this.redactId = row.id;
      await getPartner().then((res) => {
        res.data.data.map((item, key) => {
          if (item.partner !== row.partner) {
            this.addpartner.push(item.partner);
          }
        });
      });
      let idObj = {
        id: this.redactId,
      };
      await getsearch(idObj).then((res) => {
        if (res.data.code === "10000") {
          this.editfrom.editPartner = res.data.data.partner;
          this.edithShowIcon = false;
          this.imageUrl = res.data.data.partnerLogo;
          this.editfrom.editPartnerLogo = this.imageUrl;
          // console.log(this.imageUrl);
          this.editfrom.editsort = res.data.data.sort;
          this.oldUpload = true;
          this.getList();
        } else {
          this.$message.error("请求失败");
        }
      });
      this.edlog = true;
    },
    // 保存编辑内容接口调用
    save(editfrom) {
      if (this.addpartner.indexOf(this.editfrom.editPartner) !== -1) {
        this.$message({
          message: "该合作伙伴名称已存在！",
          type: "warning",
        });
      } else {
        let time;
        clearTimeout(time);
        this.$refs[editfrom].validate((valid) => {
          if (valid) {
            if (
              this.editfrom.editPartner !== "" &&
              this.editfrom.editpartnerLogo !== "" &&
              this.editfrom.editsort !== "" &&
              this.imageUrl !== ""
            ) {
              let obj = {
                id: this.redactId,
                partner: this.editfrom.editPartner,
                partnerLogo: this.editfrom.editPartnerLogo,
                sort: this.editfrom.editsort,
              };
              savePartner(obj).then((res) => {
                if (res.data.code === "10000") {
                  this.editfrom.editPartner = res.data.data.partner;
                  this.editfrom.editPartnerLogo = res.data.data.partnerLogo;
                  this.editfrom.editsort = res.data.data.sort;
                  time = setTimeout(() => {
                    this.getList();
                  });
                  this.$message({
                    message: "保存成功",
                    type: "success",
                  });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "error",
                  });
                }
              });
            } else {
              this.$message.error("上传失败,保证不能有空项！");
            }
            this.edlog = false;
          } else {
            this.$message.error("请仔细阅读填写要求！");
            return false;
          }
        });
      }
    },
    // 分页查询搜索功能接口调用
    search() {
      let timeList;
      clearTimeout(timeList);
      timeList = setTimeout(() => {
        this.page.pageNum = 1;
        this.getList(this.page);
      }, 400);
    },
    // 获取要搜索的id
    handleIndex(val) {
      this.currentRow = val;
    },
    //删除用户伙伴接口调用
    handleDelete(index, row) {
      let delarr = [];
      let dle = row.id;
      delarr.push(dle);
      let obj = {
        ids: delarr,
      };
      this.$confirm("此操作将永久删除该合作伙伴, 是否继续?", "删除该合作伙伴", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async (res) => {
          // 调用删除接口
          await deletePartner(obj).then((res) => {
            if (res.data.code === "10000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击预览触发弹窗显示隐藏+事件
    upShow() {
      this.isShowRed = true;
      this.images_long = [];
      getPartnerSearch().then((res) => {
        if (res.data.code === "10000") {
          // console.log(res.data.data);
          let allImage = res.data.data;
          allImage.map((item, index) => {
            // console.log(item);
            return this.images_long.push(item);
          });
        }
      });
    },
    showRed() {
      this.isShowRed = false;
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getList();
      // console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      this.page.pageNum = page;
      // searchPage(this.page).then(res => {
      //   console.log(res);
      // })
      this.getList();
      // console.log(`当前页: ${page}`);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  img {
    display: block;
  }
}
.box-card {
  position: relative;
  margin-top: 80px;
  margin-left: 24px;
  margin-right: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 18px;
  padding-bottom: 100px;
  overflow: auto;
  /deep/.el-card__body {
    padding: 0px;
  }
  .one {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // 面包屑
    .el-breadcrumb {
      font-size: 20px;
      height: 29px;
      line-height: 29px;
    }
    // 预览，保存，取消按钮的样式
    .but {
      display: flex;
      justify-content: space-between;
      margin-top: 34px;
      /deep/ .el-button {
        margin-right: 16px;
        margin-left: 0;
        height: 32px;
      }
    }
    // 搜索框的样式以及点击时的样式 (获取焦点时的样式)
    .search {
      /deep/ .el-input__inner {
        width: 210px;
        height: 32px;
        padding-left: 10px;
        line-height: 36px;
      }
      /deep/ .el-input__inner:focus {
        border-color: #2672ed;
        box-shadow: 0 0 0 2px rgb(197, 208, 238);
      }
    }
  }
  // 表格距离上面16px以及伙伴名称栏文字清除底部距离
  .el-table {
    margin-top: 16px;
    border-bottom: 0;
  }
  /deep/ .name_p {
    margin-bottom: 0px;
  }
}
// 表头高度以及字体样式
/deep/.has-gutter > tr > th {
  background-color: #f7f9fc;
  height: 46px;
  font-size: 14px;
  font-weight: 500;
  color: #1b1c20;
}
// 表格体和logo图片上传显示尺寸样式
/deep/ tbody > .el-table__row > td {
  height: 100px;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  .cell {
    height: 100px;
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 5.208vw;
    }
  }
}
// 分页部分的样式
.el-pagination {
  position: relative;
  text-align: right;
  height: 72px;
  border: 1px solid #e6e6e6;
  border-top: 0;
  padding-top: 16px;
  padding-bottom: 24px;
  padding-right: 24px;
  /deep/ .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  // 分页的输入框高度
  /deep/ .el-input__inner {
    height: 32px;
  }
  // 分页的输入框hover时的边框颜色
  /deep/ .el-input__inner:hover {
    border-color: #004fe0;
  }
  // 分页的输入框focus时的边框颜色
  /deep/ .el-input__inner:focus {
    border-color: #004fe0;
  }
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #004fe0;
}
// 预览弹窗的样式
.seeUp {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .seeUp_centent {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1200px;
    height: 668px;
    background-color: #fff;
    border-radius: 10px;
    padding: 0px 32px;
    .show_redx {
      width: 50px;
      height: 50px;
      background: chocolate;
      position: absolute;
      top: -25px;
      right: -25px;
      background: url("./partner_img/closes_x.png") no-repeat center;
      background-size: 100% 100%;
    }
    p {
      font-size: 30px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .img_box {
      text-align: left;
      width: 100%;
      overflow-y: hidden;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      &:hover {
        overflow-y: auto;
      }
      &::-webkit-scrollbar {
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: #dcdfe6;
        transition: background 1s;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        background: #ededed;
      }
      div {
        width: 100px;
        height: 100px;
        margin-left: 105px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          // height: 20%;
          display: block;
          width: 100%;
          caret-color: rgba(0, 0, 0, 0);
        }
      }
    }
  }
}
//新增对话框
/deep/ .el-dialog {
  margin-top: 15% !important;
  padding-left: 32px;
  padding-right: 32px;
}
/deep/ .el-dialog__body {
  padding: 0;
  margin-top: 30px;
}
/deep/.el-dialog__title {
  font-size: 20px;
  font-weight: 600;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: black;
  font-size: 20px;
}
/deep/.el-form-item__label {
  text-align: left;
}
.btn_box {
  border: 0;
  background: 0;
  color: #006eff;
  font-size: 12px;
  padding: 0;
  margin-left: 0;
}
.btn_right {
  margin-right: 20px;
}
// 弹窗上传图片样式
/deep/ .el-form-item__content {
  position: relative;
}
/deep/ .avatar-uploader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}
/deep/ .avatar-uploader:hover {
  border-color: #dcdfe6;
}
/deep/ .el-upload {
  height: 100%;
  width: 100%;
  display: flex;
  caret-color: transparent;
  align-items: center;
}
/deep/ .avatar {
  display: block;
  width: 100%;
}
.upImg {
  width: 90px;
  height: 25px;
  line-height: 25px;
  display: flex;
  align-items: center;
  margin-left: 5px;
  div {
    width: 100%;
    height: 80%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.close_small {
  position: absolute;
  top: -10px;
  left: 100px;
  width: 24px;
  height: 24px;
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/ .logoup {
  label {
    margin-top: 28px;
    &::before {
      content: "*";
      display: inline-block;
      color: #e85757;
      margin-right: 4px;
    }
  }
}
/deep/ .editlogo {
  label {
    margin-top: 28px;
    &::before {
      content: "*";
      display: inline-block;
      color: #e85757;
      margin-right: 4px;
    }
  }
}
.cancel {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  background-color: #004fe0;
  color: #fff;
}
.saveBtn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  color: #004fe0;
  border: 1px solid #004fe0;
}
/deep/.active,
/deep/.number {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
}
/deep/ .el-pager li.active {
  color: #fff;
}
/deep/ .btn-prev,
/deep/ .btn-next {
  height: 32px;
  width: 32px;
  user-select: none;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #004fe0;
  color: #fff;
}
/deep/ .el-dialog__header {
  padding-left: 0;
}
/* 迭代图片提示 */
.hint {
  user-select: none;
  position: absolute;
  color: #b7b7b7;
  font-size: 12px;
  height: 0;
  left: 0px;
  bottom: 13px;
}
</style>
<style>
.el-select-dropdown__item.selected {
  color: #004fe0;
  font-weight: 500;
}
.el-button {
  height: 32px;
  border: 1px solid #004fe0;
  padding-top: 0;
  padding-bottom: 0;
  color: #004fe0;
  padding: 0 20px;
  line-height: 32px;
  font-size: 14px;
}
.el-message-box__btns button:nth-child(2) {
  background-color: #004fe0;
  color: #fff;
  margin-left: 16px;
}
</style>
